<!-- 商品首页 -->

<template>
	<div class="page">
		<header>
			<!-- banner图 -->
			<Banner />
		</header>
		<nav></nav>
		<main style="border: 1px solid red; display: flex">
			<BigFileUpload />
			<Switch />
			<Mario />
			<MouseMove />
		</main>
		<footer>
			<TextFusion />
		</footer>
	</div>
</template>

<script setup name="homePage">
	import Banner from './components/banner.vue'
	import BigFileUpload from './components/bigFileUpload.vue'
	import Switch from './components/switch.vue'
	import Mario from './components/mario.vue'
	import MouseMove from './components/mouseMove.vue'
	import TextFusion from './components/textFusion.vue'
	onBeforeMount(() => {
		// 只有在启用了动画banner的配置，且浏览器支持css filter时才加载动画banner的图片资源
		const animatedBannerSupport =
			typeof CSS !== 'undefined' &&
			CSS.supports &&
			CSS.supports('filter: blur(1px)') &&
			!/^((?!chrome|android).)*safari/i.test(navigator.userAgent)
		// safari浏览器在mac屏幕上模糊效果有性能问题，不开启

		if (!animatedBannerSupport) {
			return //不支持直接返回
		}
		getCurrentPosition().then((res) => {
			console.log(res)
			console.log(wgs84togcj02(res.coords.longitude, res.coords.latitude))
		})
	})

	const getCurrentPosition = () => {
		return new Promise((resolve, reject) => {
			if (navigator.geolocation) {
				navigator.geolocation.getCurrentPosition(
					(success) => {
						resolve(success)
					},
					(error) => {
						reject(error)
					}
				)
			} else {
				console.error('Geolocation is not supported by this browser.')
			}
		})
	}

	const ee = 0.00669342162296594323

	const a = 6378245.0

	/**
	 * 判断是否在国内，不在国内则不做偏移
	 * @param lng
	 * @param lat
	 * @returns {boolean}
	 */
	const out_of_china = (lng, lat) => {
		var lat = +lat
		var lng = +lng
		// 纬度3.86~53.55,经度73.66~135.05
		return !(lng > 73.66 && lng < 135.05 && lat > 3.86 && lat < 53.55)
	}

	const transformlat = (lng, lat) => {
		var lat = +lat
		var lng = +lng
		var ret = -100.0 + 2.0 * lng + 3.0 * lat + 0.2 * lat * lat + 0.1 * lng * lat + 0.2 * Math.sqrt(Math.abs(lng))
		ret += ((20.0 * Math.sin(6.0 * lng * Math.PI) + 20.0 * Math.sin(2.0 * lng * Math.PI)) * 2.0) / 3.0
		ret += ((20.0 * Math.sin(lat * Math.PI) + 40.0 * Math.sin((lat / 3.0) * Math.PI)) * 2.0) / 3.0
		ret += ((160.0 * Math.sin((lat / 12.0) * Math.PI) + 320 * Math.sin((lat * Math.PI) / 30.0)) * 2.0) / 3.0
		return ret
	}

	const transformlng = (lng, lat) => {
		var lat = +lat
		var lng = +lng
		var ret = 300.0 + lng + 2.0 * lat + 0.1 * lng * lng + 0.1 * lng * lat + 0.1 * Math.sqrt(Math.abs(lng))
		ret += ((20.0 * Math.sin(6.0 * lng * Math.PI) + 20.0 * Math.sin(2.0 * lng * Math.PI)) * 2.0) / 3.0
		ret += ((20.0 * Math.sin(lng * Math.PI) + 40.0 * Math.sin((lng / 3.0) * Math.PI)) * 2.0) / 3.0
		ret += ((150.0 * Math.sin((lng / 12.0) * Math.PI) + 300.0 * Math.sin((lng / 30.0) * Math.PI)) * 2.0) / 3.0
		return ret
	}

	/**
	 * WGS84转GCj02
	 * @param lng
	 * @param lat
	 * @returns {*[]}
	 */
	const wgs84togcj02 = (lng, lat) => {
		var lat = +lat
		var lng = +lng
		if (out_of_china(lng, lat)) {
			return [lng, lat]
		} else {
			var dlat = transformlat(lng - 105.0, lat - 35.0)
			var dlng = transformlng(lng - 105.0, lat - 35.0)
			var radlat = (lat / 180.0) * Math.PI
			var magic = Math.sin(radlat)
			magic = 1 - ee * magic * magic
			var sqrtmagic = Math.sqrt(magic)
			dlat = (dlat * 180.0) / (((a * (1 - ee)) / (magic * sqrtmagic)) * Math.PI)
			dlng = (dlng * 180.0) / ((a / sqrtmagic) * Math.cos(radlat) * Math.PI)
			var mglat = lat + dlat
			var mglng = lng + dlng
			return [mglng, mglat]
		}
	}
</script>

<style lang="less" scoped></style>
